<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="echarts" :prop="options" :change:prop="pieChart.updateEcharts" id="pieChart">
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {
					// 提示框配置
					tooltip: {
						trigger: 'item', // 触发类型为数据项
						formatter: '{a} <br/>{b}: {c}%' // 提示框格式：系列名 + 数据名 + 百分比
					},
					// 图例配置
					legend: {
						orient: 'vertical', // 垂直布局
						right: '5%', // 距离右侧5%
						top: 'middle', // 垂直居中
						itemWidth: 10, // 图例标记宽度
						itemHeight: 10, // 图例标记高度
						data: this.getPortfolioData(this.riskPreference?.riskLevel).map(item => item.name) // 图例数据，从投资组合数据中提取名称
					},
					series: [{
						name: '建议配置', // 系列名称
						type: 'pie', // 图表类型为饼图
						center: ['35%', '40%'], // 饼图中心位置
						radius: ['40%', '60%'], // 饼图半径范围，创建环形图效果
						avoidLabelOverlap: false, // 防止标签重叠
						// 数据项样式
						itemStyle: {
							borderRadius: 6, // 圆角
							borderColor: '#fff', // 边框颜色
							borderWidth: 2 // 边框宽度
						},
						// 标签配置
						label: {
							show: true, // 显示标签
							position: 'inside', // 标签位置在数据项内部
							fontSize: 12, // 字体大小
							fontWeight: 'bold', // 字体粗细
							color: '#fff', // 字体颜色改为白色，提高对比度
							formatter: '{c}%', // 只显示百分比，减少文字长度
							textBorderColor: '#000', // 文字描边颜色
							textBorderWidth: 1, // 文字描边宽度
							textShadowColor: '#000', // 文字阴影颜色
							textShadowBlur: 2, // 文字阴影模糊度
							textShadowOffsetX: 1, // 文字阴影X偏移
							textShadowOffsetY: 1 // 文字阴影Y偏移
						},
						// 高亮状态配置
						emphasis: {
							label: {
								show: true,
								fontSize: 24,
								fontWeight: 'bold'
							},
							itemStyle: {
								shadowBlur: 10, // 阴影模糊大小
								shadowOffsetX: 0, // 阴影水平偏移
								shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
							}
						},
						labelLine: {
							show: false // 不显示标签引导线
						},
						data: this.getPortfolioData(this.riskPreference?.riskLevel) // 饼图数据
					}]
				}
			}
		},
		methods: {
			getPortfolioData(riskLevel) {
				const portfolioMap = {
					'保守型': [{
							value: 40,
							name: '定期存款'
						},
						{
							value: 40,
							name: '货币基金'
						},
						{
							value: 20,
							name: '债券基金'
						}
					],
					'稳健型': [{
							value: 40,
							name: '债券基金'
						},
						{
							value: 30,
							name: '稳健理财'
						},
						{
							value: 20,
							name: '货币基金'
						},
						{
							value: 10,
							name: '股票基金'
						}
					],
					'平衡型': [{
							value: 40,
							name: '混合型基金'
						},
						{
							value: 30,
							name: '债券基金'
						},
						{
							value: 20,
							name: '股票基金'
						},
						{
							value: 10,
							name: '货币基金'
						}
					],
					'进取型': [{
							value: 50,
							name: '股票基金'
						},
						{
							value: 30,
							name: '混合型基金'
						},
						{
							value: 15,
							name: '债券基金'
						},
						{
							value: 5,
							name: '货币基金'
						}
					],
					'激进型': [{
							value: 70,
							name: '股票基金'
						},
						{
							value: 20,
							name: '混合型基金'
						},
						{
							value: 10,
							name: '债券基金'
						}
					]
				}
				return portfolioMap[riskLevel] || []
			}
		},
		props: ['riskPreference']
	}
</script>

<script module="pieChart" lang="renderjs">
	import * as echarts from 'echarts';
	export default {
		mounted() {
			let that = this;
			// 通过nextTick异步画图
			this.$nextTick(() => {
				that.initEcharts()
			});
		},
		methods: {
			initEcharts() {
				this.myChart = echarts.init(document.getElementById('pieChart'))
				this.myChart.setOption(this.options);
				window.addEventListener('resize', () => {
					this.myChart.resize()
				});
			},
			// 监听配置数据变化，并重新渲染
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				if (this.myChart) {
					this.myChart.setOption(newValue);
				}
			},
		},
	}
</script>
<style scoped>
	.echarts {
		width: 100%;
		height: 500rpx;
	}
</style>